<template>
  <div id="state-button" :class="[home_state==='history_single'?'his-single-panel':home_state==='realtime_single'?'real-single-panel':'']">
    <!--<div v-if="home_state ==='realtime'||home_state==='alarm_info'" :class="[home_state ==='history_hotMap'?'active':'','btn']"
         @click="setCurState('history_hotMap')">历史热力图
    </div>-->
    <div v-if="home_state ==='history_hotMap'" class="btn" @click="setCurState('realtime')">返回散点图</div>
    <div v-if="home_state ==='history_hotMap'" :class="[home_state !='realtime'?'active':'','btn','top10']"
         @click="togglePopShow()">
      <span>{{`${hotMap_time.year}.${hotMap_time.month}.${hotMap_time.day}`}}</span>
      <i :class="[isPopShow?'up':'down','tog-icon']"></i>
    </div>
    <div class="box">
      <Calendar v-if="isPopShow" @timeEvent="historyConfirm" :calendar="hotMap_time" :rangeDown="rangeDown" :rangeUp="rangeUp"/>
    </div>

    <div class="track-btn" v-if="home_state ==='realtime_single'" @click="exitRealTrack">退出<br>跟踪</div>

    <div v-if="home_state ==='realtime_single'" :class="[home_state ==='history_hotMap'?'active':'','btn']"
         @click="clickToHistory">历史轨迹
    </div>

    <div v-if="home_state ==='history_single'" class="btn" @click="setCurState('realtime_single')">返回实时</div>
    <div class="hideSlow" id="hideSlow" style="display: none;">
      <P>温馨提示</P>
      <P>此车该天没有数据</P>
    </div>
    <div v-if="home_state ==='realtime_single'&&isHisTimeShow" :class="[home_state !='realtime_single'?'active':'','btn','top10']"
         @click="toggleHisPopShow()">
      <span>{{`${single_time.year}.${single_time.month}.${single_time.day}`}}</span>
      <i :class="[isHisPopShow?'up':'down','tog-icon']"></i>
    </div>
    <div class="box" style="top:160px;">
      <Calendar v-if="isHisPopShow&&(home_state ==='realtime_single'||home_state ==='history_single')&&isHisTimeShow" @timeEvent="singleConfirm" :calendar="single_time"/>
    </div>
    <div v-if="home_state ==='alarm_info'" @click="exitAlarm" class="btn exitBtn">退出报警</div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import Calendar from '../sub-home/calendar'
  import DateTimeHelper from '../../util/datetime-helper';
  import eventBus from '../../util/event-bus'

  export default {
    name: 'VueComponent',
    data() {
      return {
        isPopShow: false,
        isHisPopShow: false,
        his_nav: 'all',    //all-全部车辆，single-单车
        all_calendar: false,
        single_calendar: false,
        carListShow: false,
        input_all: '',
        input_single: '',
        carList: ['14705567536'],
        tempData: {},
        isHisTimeShow:false,
       /* rangeDown: {
          year: 2018,
          month: 7,
          day: 7
        },
        rangeUp: {
          year: 2018,
          month: 7,
          day: 7
        }*/
      }
    },
    mounted() {
      this.initHisTime();

      let formatedPreDate = DateTimeHelper.formPreDate();   //初始化当前年月日
      let preTime = formatedPreDate.split(/[.: ]/);

      this.rangeUp = {
        year: parseInt(preTime[0]),
        month: parseInt(preTime[1]),
        day: parseInt(preTime[2]),
      }
      eventBus.$on("noDataTitle", () => {
        document.getElementById("hideSlow").style.display = "";
        var test = document.getElementById("hideSlow");
        var count = (function() {
          var timer;
          var i = 0;
          function change(tar) {
            i++;
            var num = 1-i/100;
            test.style.opacity=num;
            if (i === tar) {
              clearTimeout(timer);
              document.getElementById("hideSlow").style.display = "none";
              return false;
            }
            timer = setTimeout(function() {
              change(tar)
            }, 100)
          }
          return change;
        })()
        count(100)
      })

    },
    components: {
      Calendar,
    },
    computed: {
      ...mapGetters(['home_state', 'hotMap_time', 'single_time', 'single_car','alarmInfo','single_map_state']),
      panelClass:() => {
        alert(this.home_state);
        switch (this.home_state){
          case 'history_single':
            return 'his-single-panel';
            break;
          case 'realtime_single':
            return 'real-single-panel';
            break;
          default:
            break;
        }
      }
    },
    methods: {
      ...mapMutations(['updateLoadingState','updateHomeState', 'updateHotMapTime', 'updateSingleTime', 'updateSingleCar','updateAlarmInfo','updateCompanyInfo']),
      togglePopShow() {
        this.isPopShow = !this.isPopShow;
      },
      toggleHisPopShow(){
        this.isHisPopShow = !this.isHisPopShow;
      },
      setCurState(state) {
        if(state === 'history_hotMap'){
          let formatedPreDate = DateTimeHelper.formPreDate();   //初始化当前年月日
          let preTime = formatedPreDate.split(/[.: ]/);
          this.updateHotMapTime({
            year: parseInt(preTime[0]),
            month: parseInt(preTime[1]),
            day: parseInt(preTime[2]),
          });
        }
        if(state === 'realtime_single'){
          eventBus.$emit("exitHistorySingle");
        }
        this.updateHomeState(state);
        this.isPopShow = false;
      },
      initHisTime() {
        let formatedPreDate = DateTimeHelper.formPreDate();   //初始化当前年月日
        let preTime = formatedPreDate.split(/[.: ]/);
        this.updateSingleTime({
          year: parseInt(preTime[0]),
          month: parseInt(preTime[1]),
          day: parseInt(preTime[2]),
        });
      },
      historyConfirm(data) {
        this.updateHomeState('history_hotMap');
        this.updateHotMapTime(data);
        this.isPopShow = false;
      },
      singleConfirm(data){
        this.updateHomeState('history_single');
        this.updateSingleTime(data);
        this.updateLoadingState(true);
        this.isHisTimeShow = false;
        this.isHisPopShow = false;
      },
      exitRealTrack(){
        this.updateHomeState(this.single_map_state.homeState);  //为了判断退出跟踪是从哪个页面(多车还是单车)推出的
        eventBus.$emit("exitRealTrack");
      },

      clickToHistory(){
        this.isHisTimeShow = !this.isHisTimeShow;
        this.isHisPopShow = true;
        // this.isPopShow = !this.isPopShow;
        // setCurState('history_single')
      },
      exitAlarm(){
        this.updateAlarmInfo({});
        this.updateCompanyInfo({
          id:'',
          name:''
        });
        this.updateHomeState('realtime');
        eventBus.$emit("exitRealTrack");
      },

    },
    watch: {}
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  #state-button {
    pointer-events: auto;
    position: absolute;
    top: 100px;
    left: 480px;
    width: 120px;
    min-height: 120px;
    transition: left ease 0.1s;
    &.his-single-panel {
      left: 400px;
      transition: left ease 0.5s;
    }
    &.real-single-panel {
      left: 20px;
      transition: left ease 0.5s;
    }
    .btn {
      width: 100%;
      height: 46px;
      font-size: $font-mid;
      color: #fff;
      background: linear-gradient(#1f3052, #1e283b);
      /*background:#4A8074;*/
      box-sizing: border-box;
      border: 2px solid transparent;
      cursor: pointer;
      line-height: 42px;
      margin-bottom: 20px;
      @include borderBlur;
      &.top10 {
        margin-top: 10px;
      }
      &.active {
        background: linear-gradient(#3a97a8, #0b5d74);
        border: 2px solid #2e4e5d;
      }
      &.exitBtn{
        margin-top: 10px;
      }
      .tog-icon {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 30px;
        background: url("../../../static/images/index/tog-down.png") no-repeat center;
        background-size: 16px 14px;
        transform: rotate(360deg);
        transition: all ease 0.3s;
        cursor: pointer;
        &.up {
          transform: rotate(180deg);
          transition: all ease 0.3s;
        }
      }

    }
    .box{
      position: absolute;
      left: 0;
      top: 75px;
    }
    .track-btn{
      @include borderBlur;
      font-size: $font-big;
      cursor: pointer;
      padding: 10px 0;
      width: 80px;
      margin-bottom: 20px;
    }

    .his-box {
      position: absolute;
      left: 0;
      top: 105px;
      min-width: 260px;
      padding: 6px 10px;
      background: #191e30;
      @include inputBorder;
      p {
        line-height: 25px;
        text-align: left;
        span {
          margin-right: 10px;
          font-size: $list-font;
          cursor: pointer;
          &.active {
            color: #05d6c9;
          }
        }
      }
      .box {
        text-align: left;
        margin-top: 6px;
        .inputBox {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          min-width: 140px;
          box-sizing: border-box;
          padding: 0 5px;
          @include inputBorder;
          input {
            display: inline-block;
            vertical-align: middle;
            padding: 3px 5px;
            width: 120px;
            color: #fff;
            background: transparent;
            letter-spacing: 1px;
            line-height: 24px;
            border: none;
            outline: none;
          }
          .c-icon {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 30px;
            background: url("../../../static/images/index/c-icon.png") no-repeat center;
            cursor: pointer;
          }
        }
        .btn {
          float: right;
          vertical-align: middle;
          @include linearBtn;
          @include inputBorder;
          margin-left: 5px;

          &:hover {
            background: linear-gradient(#0d798d, #064e63);
          }
        }
        .searchBox {
          position: relative;
          width: 160px;
          margin-bottom: 10px;
          @include inputBorder;
          input {
            width: 120px;
            padding-left: 5px;
            color: #fff;
            background: transparent;
            border: none;
            outline: none;
            &::placeholder {
              color: #ccc;
            }
          }
          .icon {
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px 20px;
            cursor: pointer;
            &.s-icon {
              background-image: url("../../../static/images/index/s-icon.png");
            }
            &.clear-icon {
              background-image: url("../../../static/images/index/clear-icon.png");
            }
          }

          ul {
            list-style: none;
            position: absolute;
            top: 35px;
            left: -2px;
            z-index: 100;
            min-width: 160px;
            min-height: 50px;
            margin: 0;
            padding-left: 0;
            background-color: #191e30;
            @include inputBorder;
            li {
              line-height: 30px;
              text-indent: 5px;
              cursor: pointer;
              &:hover {
                background-color: #262d44;
              }
            }
          }
        }
        .link-tip {
          color: #38a8d3;
        }
      }
    }


    .hideSlow{
      /* visibility: hidden;*/
      position:absolute;
      width:200px;
      height:120px;
      margin-top:-100px;
      margin-left:-60px;
      border: 2px solid #1c9e96;
      color:rgba(7, 34, 31, 0.95);

      border-radius: 25px;

      color: #fff;
      animation: showtip 3s 1;
      animation-fill-mode: forwards;
      -webkit-animation: showtip 3s 1;
      -webkit-animation-fill-mode: forwards;
    p{
      text-align: center;
      padding: 16px;
    }
    .btn{
      cursor: pointer;
    }
    @keyframes showtip {
      0%   {background:rgba(7, 34, 31, 0.95); left:540px; top:0px;}
      100% {background:rgba(7, 34, 31, 0.95); left:540px; top:460px;}
    }
    @-webkit-keyframes showtip {
      0%   {background:rgba(7, 34, 31, 0.95); left:540px; top:0px;}
      100% {background:rgba(7, 34, 31, 0.95); left:540px; top:460px;}
    }
    }
  }
</style>
